<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      overflow: hidden;
    }

    .sectionA {
      height: 100%;
      background-color: #041527;
    }

    .sectionA>.bg {
      width: 1200px;
      height: 732px;
      left: 50%;
      margin-left: -600px;
      background: url('images/first_bg.png');
      position: absolute;
    }

    .sectionA>[class^=word] {
      position: absolute;
    }

    .sectionA>.word1 {
      width: 718px;
      height: 190px;
      top: 110px;
      left: 50%;
      margin-left: -400px;
      background: url('images/first_word01.png');
    }

    .sectionA>.word2 {
      width: 600px;
      height: 128px;
      left: 50%;
      top: 300px;
      margin-left: -200px;
      background: url('images/first_word02.png');
    }

    .sectionA>.word3 {
      width: 810px;
      height: 82px;
      left: 50%;
      top: 428px;
      margin-left: -405px;
      background: url('images/first_word03.png');
    }

    .sectionA>.web {
      width: 214px;
      height: 214px;
      position: absolute;
      right: 100px;
      top: 100px;
    }

    .sectionA>.web>.circle {
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('images/first_web.png');
      /* 添加动画效果 */
      animation: sectionA-Rotate 2s linear infinite;
    }

    .sectionA>.web p {
      /*line-height: 106px;*/
      font-size: 45px;
      font-weight: 900;
      position: absolute;
      left: 50%;
      margin-left: -52px;
    }
    /* 默认一直旋转的动画 */

    @keyframes sectionA-Rotate {
      from {}
      to {
        transform: rotate(360deg);
      }
    }
    /* 默认把这些元素全部移出去 */

    .sectionA>.bg {
      transform: translateY(300%);
      transition: all .5s;
    }

    .sectionA:hover>.bg {
      transform: none;
    }

    .sectionA>.word1 {
      transform: translateX(-300%);
      transition: all .5s .2s;
    }

    .sectionA:hover>.word1 {
      transform: none;
    }

    .sectionA>.word2 {
      transform: translateX(300%);
      transition: all .5s .2s;
    }

    .sectionA:hover>.word2 {
      transform: none;
    }
  </style>
</head>

<body>
  <div class="sectionA">
    <div class="bg"></div>
    <div class="word1"></div>
    <div class="word2"></div>
    <div class="word3"></div>
    <div class="web">
      <div class="circle"></div>
      <p>Web<br>前端</p>
    </div>
  </div>
</body>

</html>